<template>
  <div class="home">
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="con">
      <div class="con-wrap" v-for="item1 in homeData" :key="item1.cateId">
        <div class="con-title">{{ item1.cateName }}</div>
        <div class="content-wrap">
          <div class="con-content" v-for="item2 in item1.cateData" :key="item2.name" @click="toDetail(item2)">
            <div class="content-name">{{ item2.name }}</div>
            <div class="content-img">
              <img :src="item2.img" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import { getCurrentInstance, reactive, toRefs } from 'vue'
import router from '../router/index'
export default {
  setup() {
    const { proxy } = getCurrentInstance()

    const images = [
      'https://i.loli.net/2021/12/03/xw3i8yEzoLDUedf.jpg',
      'https://i.loli.net/2021/12/03/EbFZWiH1RV94OK6.jpg',
      'https://s3.bmp.ovh/imgs/2021/12/fb13e02bfd2383dd.jpg',
      'https://s3.bmp.ovh/imgs/2021/12/f331c7187943665a.jpg',
    ];

    const state = reactive({
      homeData: []
    })

    const getHomeData = () => {
      proxy.$axios.get('/homedata').then(res => {
        // console.log(res);
        state.homeData = res.dataList;
        localStorage.setItem('lists', JSON.stringify(res.dataList));
      })
    }
    if (localStorage.getItem('lists')) {
      state.homeData = JSON.parse(localStorage.getItem('lists'))
    } else {
      getHomeData();
    }


    const toDetail = (goods) => {
      if (localStorage.getItem('isLogin')) {
        //传参用query方式
        router.push({ path: 'Detail', query: goods })
      } else {
        proxy.$toast('请先登录')
        setTimeout(() => {
          router.push('/login')
        }, 500)
      }
    }
    return {
      images,
      ...toRefs(state),
      getHomeData,
      toDetail
    };
  },
}
</script>
  
<style scoped>
@media screen and (max-width: 380px) {
  .con-content {
    width: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
  }
}

.home {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.van-swipe-item {
  height: 240px;
}

.van-swipe-item img {
  width: 100%;
  height: 100%;
}

.con {
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.con-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.con-title {
  width: 100%;
  color: rebeccapurple;
  padding: 0.625rem;
  font-size: 30px;
  margin-left: 0.625rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  margin-bottom: 0.625rem;
}

.content-wrap {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0.625rem 0.9375rem;
}

.con-content {
  width: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

.content-name {
  width: 6.25rem;
  font-size: 20px;
  color: black;
  padding: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-img {
  width: 220px;
  height: 210px;
}

.content-img img {
  width: 100%;
  height: 100%;
}</style>